<template>
  <ul class="z_menu">
    <div v-for="item in folderList"  :key="item.id">
      <li @click="clickOpenChildren(item)">
        <i :class="[!item.openChildren ? 'el-icon-folder-opened' : 'el-icon-folder-remove', 'folder']"></i>
        <span>{{ item.name }}</span>
        <i class="el-icon-s-tools setting" @click="openDropDown($event, item)"></i>
        <div class="drop_down" v-if="item.drop_down">
          <ul>
            <li v-for="(drop, index) in list1" :key="index" @click="clickDropDown($event, drop)">
              <span :style="{ 'color':drop.type === 'del' ? '#E64340': '#000' }">{{ drop.name }}</span>
            </li>
          </ul>
        </div>
      </li>
      <div v-show="item.children.length !== 0 && item.openChildren" class="childrenDiv">
        <li
          v-for="item1 in item.children"
          :key="item1.id"
          :class="['animated', 'animate__slow', item1.openChildren ? 'fadeInLeft' : 'bounceOutRight', item1.selectedName]"
          @click="clickChildren(item, item1)"
          style="z-index: 99"
        >
          <i class="el-icon-pie-chart childrenFolder"></i>
          <span>{{ item1.name }}</span>
          <i class="el-icon-s-tools setting" @click="openDropDown($event, item1)"></i>
          <div class="drop_down" v-if="item1.drop_down">
          <ul>
            <li v-for="(drop, index) in list2" :key="index" @click="clickDropDown($event, drop)">
              <span :style="{ 'color':drop.type === 'del' ? '#E64340': '#000' }">{{ drop.name }}</span>
            </li>
          </ul>
         </div>
        </li>
      </div>
    </div>          
  </ul>
</template>

<script>
import '@/assets/css/animate.min.css'
import _ from 'lodash'
export default {
  name: 'z_menu',
  props: ['data', 'list1', 'list2'],
  data () {
    return {
      folderList: this.data
    }
  },
  methods: {
    addSelectedName (arr) {
      arr = arr.map(item => {
        item.openChildren = false
        item.drop_down = false
        item.children = item.children.map(item1 => {
          item1.openChildren = false
          item1.selectedName = ''
          item1.drop_down = false
          return item1
        })
      })
    },
    // 点击父级
    clickOpenChildren (item1) {
      // 打开子级菜单
      this.folderList = this.folderList.map(item => {
        if (item1.id === item.id) {
          if (item.openChildren === true) {
            if (item.children.length !== 0) {
              setTimeout(() => {
                item.openChildren = false
                this.$forceUpdate()
              }, 550)
            } else {
              item.openChildren = false
            }
          } else {
            item.openChildren = !item.openChildren
          }
          const fn = obj => {
            obj.children.map(child => {
              child.openChildren = !child.openChildren
              if (child.children.length !== 0) {
                fn(child.children)
              }
              return child
            })
          }
          // 递归循环
          fn(item)
          // item.children = item.children.map(item2 => {
          //   item2.openChildren = !item2.openChildren
          //   return item2
          // })
        }
        return item
      })
      this.$emit('clickOpenChildren', item1)
    },
    // 点击子级
    clickChildren (item, item1) {
      // 选择子级菜单
      this.folderList = this.folderList.map(folder => {
          if (folder.id === item.id) {
            folder.children = folder.children.map(child => {
              child.selectedName = ''
              if (item1.id === child.id) {
                child.selectedName = 'selected'
              }
              return child
            })
          }
          return folder
        })
      this.$emit('clickChildren', item, item1)
    },
    // 点击设置
    openDropDown (e, item) {
      e.stopPropagation()
        this.folderList = this.folderList.map(folder => {
          folder.drop_down = false
          folder.children = folder.children.map(child => {
            child.drop_down = false
            return child
          })
          if (item.id === folder.id) {
            folder.drop_down = true
          } else {
            folder.children = folder.children.map(child => {
              child.drop_down = false
              // child.selectedName = ''
              if (item.id === child.id) {
                child.drop_down = true
                // child.selectedName = 'selected'
              }
              return child
            })
          }
          return folder
        })
      this.$emit('openDropDown', item)
    },
    // 点击其他地方关闭
    closeDropDown () {
      const fn = (arr) => {
        arr = arr.map(item => {
          item.drop_down = false
          if (item.children.length !== 0) {
            item.children = fn(item.children)
          }
          return item
        })
        return arr
      }
      this.folderList = fn(this.folderList)
    },
    // 点击具体操作
    clickDropDown (e, dropDown) {
      e.stopPropagation()
      this.$emit('clickDropDown', dropDown)
    }
  },
  mounted () {
    this.addSelectedName(this.folderList)
    document.addEventListener('click', e => {
      this.closeDropDown()
    })
  },
  watch: {
    data: function (newV, oldV) {
      // 拿到data的值 克隆一份新的在这边
      this.folderList = _.cloneDeep(newV)
      // console.log(newV)
      // console.log(newV)
      // console.log(this.folderList)
    }
  },
}
</script>

<style lang="less" scoped>
.z_menu {
  width: 100%;
  height: 100%;
  font-size: 14px;
  li {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    cursor: pointer;
    padding: 0 20px;
    position: relative;
    span {
      color: #333;
      margin-left: 10px;
    }
    .folder {
      font-size: 16px;
      color: #0DB3A6;
    }
    .setting {
      position: absolute;
      color: #0DB3A6;
      display: none;
      right: 20px;
      font-size: 16px;
    }
  }
  li:hover {
    background: #e6f6f4;
  }
  li:hover .setting {
    display: block;
  }
  .setting:hover {
    color: #0ca094;
  }
  .childrenDiv {
    li {
      padding-left: 35px;
    }
    .childrenFolder {
      color: #9D65E5;
    }
    .selected {
      background: #e6f6f4;
    }
  }
  .drop_down {
    width: 130px;
    box-shadow: 0 0 6px rgba(51,51,51,.2);
    position: absolute;
    z-index: 998;
    right: -50px;
    top: 40px;
    ul {
      width: 100%;
      height: 100%;
      z-index: 999;
      li {
        font-size: 14px;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: white;
        border-bottom: 1px solid #eee;
      }
      li:hover {
        background: #e6f6f4;
      }
    }
  }
}
</style>